<!-- 选手成绩证书 -->
<template>
  <div class="gl_contentBox gl_heightFull">
    <div ref="certificate" class="certificate">
      <div v-for="(item, index) in itemArr" :key="index">
        <div id="drag" :ref="'name' + index" @mousedown="move">{{ itemArr[index].content }}</div>
      </div>
    </div>
    <el-row class="gl_mt_15">
      <el-col :span="2">选手成绩证书长：</el-col>
      <el-col :span="2"><el-input v-model="width" size="mini" @blur="changeWidth" /></el-col>
      <el-col :span="1" class="gl_pl_15">cm</el-col>
      <el-col :span="2">选手成绩证书宽：</el-col>
      <el-col :span="2"><el-input v-model="height" size="mini" @blur="changeHeight" /></el-col>
      <el-col :span="1" class="gl_pl_15">cm</el-col>
    </el-row>
    <el-row class="gl_mt_15">
      <el-col :span="2">
        上传背景图片：
      </el-col>
      <el-col :span="6">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" :on-success="handleSuccess">
          <el-button size="mini" type="primary">点击上传</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-row class="gl_mt_15">
      <el-col :span="4"><el-input v-model="text" size="mini" /></el-col>
      <el-col :span="4" class="gl_pl_15"><el-button size="mini" type="primary" @click="addText">添加字段</el-button></el-col>
    </el-row>
    <el-row v-for="(item, index) in itemArr" :key="index" class="gl_mt_15" :gutter="15">
      <el-col ref="text" :span="2">{{ item.content }}</el-col>
      <el-col :span="4">
        <span>字体大小：</span>
        <el-select v-model="item.size" size="mini" @change="changeFontSize(index)">
          <el-option
            v-for="option in sizes"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <span>字体格式：</span>
        <el-select v-model="item.family" size="mini" @change="changeFontFamily(index)">
          <el-option
            v-for="option in familys"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-col>
      <el-col :span="2">
        <span style="width:80px; margin-bottom: 10px; display: block; float: left">字体颜色：</span>
        <el-color-picker v-model="item.color" size="mini" @change="changeColor(index)" />
      </el-col>
      <el-col :span="2">
        <span>粗体：</span>
        <el-switch v-model="item.strong" @change="textStrong(index)" />
      </el-col>
      <el-col :span="2">
        <span>斜体：</span>
        <el-switch v-model="item.tilt" @change="textTilt(index)" />
      </el-col>
      <el-col :span="2">
        <span>下划线：</span>
        <el-switch v-model="item.underline" @change="textUnderline(index)" />
      </el-col>
      <!-- <el-col :span="1" v-model="strong" class="text_style" @click="textStrong(index)">B</el-col> -->
      <!-- <el-col :span="1" class="text_style"><span style="font-style: oblique">I</span></el-col>
      <el-col :span="1" class="text_style"><span style="text-decoration: underline">U</span></el-col> -->
      <el-col :span="2"><el-button type="danger" size="mini" @click="deleteText(index)">删除</el-button></el-col>
    </el-row>
    <el-row class="gl_mt_15">
      <el-button type="primary" size="mini">下载打印模板</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Certificate',
  data() {
    return {
      width: '',
      height: '',
      fileList: [],
      text: '',
      sizes: [{
        value: '12',
        label: '12px'
      }, {
        value: '14',
        label: '14px'
      }, {
        value: '16',
        label: '16px'
      }],
      familys: [{
        value: '微软雅黑',
        label: '微软雅黑'
      }, {
        value: '宋体',
        label: '宋体'
      }, {
        value: '隶书',
        label: '隶书'
      }],
      itemArr: [],
      positionX: 0,
      positionY: 0
    };
  },
  methods: {
    changeWidth() {
      this.$refs.certificate.style.width = this.width * 30 + 'px';
    },
    changeHeight() {
      this.$refs.certificate.style.height = this.height * 30 + 'px';
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      // this.$refs.certificate.style.backgroundImage = response;
      this.$refs.certificate.style.backgroundSize = '100% 100%';
    },
    addText() {
      this.itemArr.push({
        content: this.text,
        size: '14px',
        family: '微软雅黑',
        color: '#000000',
        strong: false,
        tilt: false,
        underline: false
      });
      this.text = '';
    },
    deleteText(index) {
      this.itemArr.splice(index, 1);
    },
    move(e) {
      const odiv = e.target;
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;
      const parX = this.$refs.certificate.clientWidth + 15;
      const parY = this.$refs.certificate.clientHeight + 15;
      document.onmousemove = (e) => {
        let left = (e.clientX - disX) > 15 ? e.clientX - disX : 15;
        let top = (e.clientY - disY) > 15 ? e.clientY - disY : 15;
        const maxleft = parX - odiv.clientWidth;
        const maxtop = parY - odiv.clientHeight;
        if (left > maxleft) left = maxleft;
        if (top > maxtop) top = maxtop;
        this.positionX = top;
        this.positionY = left;
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    changeColor(index) {
      const col = 'name' + index;
      this.$refs[col][0].style.color = this.itemArr[index].color;
    },
    changeFontSize(index) {
      const col = 'name' + index;
      this.$refs[col][0].style.fontSize = this.itemArr[index].size + 'px';
    },
    changeFontFamily(index) {
      const col = 'name' + index;
      this.$refs[col][0].style.fontFamily = this.itemArr[index].family;
    },
    textStrong(index) {
      const col = 'name' + index;
      if (this.itemArr[index].strong) {
        this.$refs[col][0].style.fontWeight = 700;
      } else {
        this.$refs[col][0].style.fontWeight = 500;
      }
    },
    textTilt(index) {
      const col = 'name' + index;
      if (this.itemArr[index].tilt) {
        this.$refs[col][0].style.fontStyle = 'oblique';
      } else {
        this.$refs[col][0].style.fontStyle = 'normal';
      }
    },
    textUnderline(index) {
      const col = 'name' + index;
      if (this.itemArr[index].underline) {
        this.$refs[col][0].style.textDecoration = 'underline';
      } else {
        this.$refs[col][0].style.textDecoration = 'none';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.certificate {
  border: 1px solid red;
  width: 50%;
  height: 424px;
}
.el-col {
  line-height: 28px;
  .el-color-picker {
    position: relative;
    top: 0px;
  }
}
#drag {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 16px;
  left: 16px;
  border: 1px solid red;
}
// .text_style {
//   cursor: pointer;
// }
</style>
